<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-form ref="form" :model="form" :inline="true" style="text-align: left;height: 38px">
          <el-form-item>
            <el-input v-model="form.filter.kwd" style="float: left;" placeholder="请输入查询名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.filter.kwd1" placeholder="请选择角色" clearable>
              <el-option v-for="item in roleList" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="$utils.getRoleCodeList().indexOf('SITE_MANAGER')==-1">
            <el-select v-model="form.filter.fieldList[0].val" placeholder="请选择中心" clearable>
              <el-option v-for="item in siteList" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="float: left;" @click.native="onSubmit"><i class="el-icon-search"></i>查询
            </el-button>
            <el-button v-if="$utils.ckUIPower('S01010101')" @click="openEditDialog" style="float: left;"><i
              class="el-icon-plus"></i>新增
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNumber"
            :page-sizes="[10, 20, 30]"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="page.totalRow">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-table stripe
                v-loading="loading"
                element-loading-text="数据加载中"
                :data="page.list"
                style="width:100%"
                @sort-change="onSubmit"
                border>
        <el-table-column
          inline-template
          fixed
          label="序号"
          width="80"
          align="center">
          <span>{{$index + 1 + ((page.pageNumber - 1) * page.pageSize)}}</span>
        </el-table-column>
        <el-table-column
          inline-template
          label=""
          width="80"
          align="center">
        <span>
          <img :src="row.avator?row.avator:'/static/img/noavatar.gif'" class="avator" width="30px" height="30px">
        </span>
        </el-table-column>

        <el-table-column
          property="account"
          sortable="custom"
          label="帐号"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          label="姓名"
          property="name"
          sortable="custom"
          width="150"
          inline-template
          align="center">
          <span style="white-space:nowrap;">
            {{row.name}}
          </span>
        </el-table-column>
        <el-table-column
          label="角色"
          property="roleName"
          sortable="custom"
          align="center">
        </el-table-column>
        <el-table-column
          property="siteName"
          sortable="custom"
          label="所属中心"
          align="center">
        </el-table-column>
        <el-table-column
          inline-template
          sortable="custom"
          property="active"
          label="状态"
          width="120"
          align="center"
        >
        <span>
          {{active[row.active]}}
        </span>
        </el-table-column>
        <el-table-column
          inline-template
          label="操作"
          fixed="right"
          align="center"
          v-if="$utils.ckUIPower('S01010101')"
          width="100">
          <template>
            <el-button :key="'edit'+row.id" type="text" @click.native="openEditDialog(row.id)">修改</el-button>
            <el-popover
                        ref="popover_"
                        :key="row.id"
                        placement="left">
              <p><i class="el-alert__icon el-icon-warning red"></i>确定要{{row.active == 0 ? '启用' : '禁用'}}此用户吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="primary" size="mini" @click.native.prevent="activeAccount(row.id);">确定
                </el-button>
              </div>
            </el-popover>
            <el-button type="text" v-popover:popover_>{{row.active == 0 ? '启用' : '禁用'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--弹出框-->
    <account-add-dialog v-bind:dialog-form-visible="dialogData.show" v-bind:id="id"
                        v-on:closeDialog="closeDialog"></account-add-dialog>
  </div>
</template>
<script>
  import AccountAddDialog from './add.dialog.vue'
  import http from '../../../api/http'

  export default {
    data() {
      return {
        loading: true,
        form: {
          siteId: '',
          roleIds: '',
          filter: {
            kwd: '',
            kwd1: '',
            sort: {create_datetime: 'desc'},
            fieldList: [{field: 'siteId', exp: '=', val: ''}, {field: 'roleId', exp: '=', val: ''}]
          },
          pageNo: 1,
          pageSize: 10
        },
        status: ["", ""],
        active: ["禁用", "启用"],
        id: null,
        dialogData: {show: false},
        page: {},
        roleList: [],
        siteList: [],
        accountRoleName: '',
        accountRoleId: ''
      }
    },
    computed: {},
    methods: {
      onSubmit(sortCol) {
        var vm = this;
        if (sortCol && sortCol.prop != undefined && sortCol.prop != '' && sortCol.prop != 'undefined') {
          var sortJson = '{"' + sortCol.prop + '":"' + (sortCol.order == 'descending' ? 'desc' : 'asc') + '"}';
          vm.form.filter.sort = JSON.parse(sortJson);
          vm.form.pageNo = 1;
        }
        vm.loading = true;
        http.postData(vm, "/sys/account/page", {
          json: JSON.stringify(vm.form.filter),
          pageNo: vm.form.pageNo,
          pageSize: vm.form.pageSize
        }, function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.page = ret.value;
          }
          vm.loading = false;
        });
      },
      openEditDialog(id_) {
//        this.$set(this.dialogData, 'show', true);
        this.dialogData.show = true;
        if (id_ != undefined && typeof id_ == "string") {
          this.id = id_;
        } else {
          this.id = '';
        }
      },
      loadData() {
        var vm = this;
        if (this.id != undefined && this.id != '') {
          http.postData(vm, "/sys/account/detail/" + this.id, {}, function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              func(ret.value);
            } else {
              vm.$notify.error({title: '操作失败', message: ret.msg});
            }
          });
        }
      },
      closeDialog() {
//        this.$set(this.dialogData, 'show', false);
        this.dialogData.show = false;
      },
      deleteAccount(id) {
        var vm = this;
        this.$confirm('此操作将永久删除该帐号, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          http.postData(vm, "/sys/account/del/" + id, {}, function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
              vm.onSubmit();
            } else {
              vm.$message({type: 'error', message: ret.msg});
            }
          });
        })
      },
      activeAccount(id) {
        var vm = this;
        http.postData(vm, "/sys/account/active/" + id, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$notify({title: '操作提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$notify.error({title: '操作提示', message: ret.msg});
          }
        });
      },
      handleSizeChange() {
        this.form.pageNo = 1
        this.onSubmit()
      },
      handleCurrentChange(val) {
        this.form.pageNo = val
        this.onSubmit()
      }
    },
    components: {
      AccountAddDialog
    },
    created() {
      this.onSubmit();
      var vm = this;
      http.postData(vm, "/sys/role/list", {}, function (resp) {
        vm.roleList = resp.body.value;
      });
      if (vm.$utils.getRoleCodeList().indexOf('SITE_MANAGER') == -1)
        http.postData(vm, "/pt/site/list", {}, function (resp) {
          vm.siteList = resp.body.value;
        });
    }
  }

</script>
<style>
</style>
